<template>
  <div v-if="visible">
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      append-to-body
      :visible.sync="visible"
      top="10vh"
      title="选择查询条件"
      @close="closeDialog"
      width='800px'
    >
      <!-- 组合查询弹出层 -->
      <table-search
        :filter-list="tableConfig.columnDatas"
        class="choose-inner"
        :only-search-bar="tableConfig.onlySearchBar"
        @tableSearch="initTableData"
      />
      <!-- 组合查询弹出层 -->
      <!-- 表格区 -->
      <el-table
        ref="tabBar"
        v-loading="tableDataLoading"
        style="width: 100%; margin-top:10px;"
        :data="listData"
        height="300"
        :header-cell-style="{'background':'#F6F6F6','height':'46px','font-weight':'100','font-size':'12px','color':'#000','border-top':'1px solid #EBEEF5'}"
        highlight-current-row
        @current-change="handleCurrentChange"
        @row-dblclick="doubleClick"
      >
        <el-table-column type="index" label="序号" width="100" />
        <el-table-column prop="filterDescribe" label="描述" />
        <el-table-column prop="createTime" type="date" label="创建时间" />
        <el-table-column label="收藏" width="80">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row.isCollect }} -->
              <i class="el-icon-star-on star-style" :class="{'star-style-sctive':scope.row.isCollect === 1}" @click="collect(scope.row)" />
            </div>
          </template>
          <!-- <el-table-column prop="role3" label="收藏" /> -->
        </el-table-column></el-table>
      <!-- 分页 -->
      <pagination
        :total="tableRequest.tableTotal"
        :page.sync="tableRequest.page"
        :limit.sync="tableRequest.rows"
        :params="tableRequest"
        @pagination="pageTableData"
      />
      <!-- 分页 -->
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="small" @click="retreat">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import tableSearch from "./components/table-search";
import { chooseSearchData, queryConditions } from "./apis/table.data.js";
import Pagination from "./components/pagination";
import { toFormData } from "./util";
export default {
  components: {
    tableSearch,
    Pagination
  },
  props: {
    show: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      showCombFilter: true,
      tableDataLoading: true,
      tableConfig: {
        interfacePath: "/ucenter/api/role/page", // 请求路由
        onlySearchBar: true,
        columnDatas: [] // 表格列信息
      },
      visible: this.show,
      listData: [],
      tableRequest: {
        page: 1,
        rows: 10,
        sort: "",
        order: "desc",
        pageFlag: true,
        onlyCountFlag: false,
        filtersRaw: [],
        filtersRawTemp: [],
        tableTotal: 0
      },
      currentRow: null // 选中表格行数
    };
  },
  watch: {
    show: {
      handler: function(val) {
        this.visible = Boolean(val);
        if (this.visible) {
          this.onShow();
          this.newData(toFormData(this.tableRequest));
        }
      }
    }
  },
  mounted() {},
  methods: {
    // 获取选择查询数据
    newData(data) {
      chooseSearchData(data, this.$route.query.menuCode).then(res => {
        this.tableDataLoading = false;
        this.listData = JSON.parse(JSON.stringify(res.data.records));
        this.tableRequest.page = res.data.page;
        this.tableRequest.rows = res.data.rows;
        this.tableRequest.tableTotal = res.data.total;
      });
    },
    // 获取分页回调数据
    pageTableData(val) {
      this.newData(val);
    },

    // 获取选择查询数据
    initTableData(flag, data) {
      this.tableRequest.filtersRaw = data;
      this.tableDataLoading = true;
      this.newData(toFormData(this.tableRequest));
    },
    closeDialog(val) {
      this.$nextTick(() => {
        this.$emit("update:show", false);
      });
      this.tableConfig.columnDatas = JSON.parse(JSON.stringify([]));
    },
    retreat() {
      this.$nextTick(() => {
        this.$emit("chooseSdata", this.currentRow);
        this.$emit("update:show", false);
      });
    },
    // 选中表格行数
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    doubleClick(val) {
      this.currentRow = val;
      this.retreat();
    },
    onShow() {
      this.$nextTick(() => {
        const cols = this.$refs.tabBar.$children;
        cols.forEach(el => {
          if (
            el.hasOwnProperty("columnId") &&
            el.type !== "hidden" &&
            el.type !== "selection" &&
            el.type !== "index" &&
            el.type !== "expand"
          ) {
            if (el.label !== "收藏") {
              this.tableConfig.columnDatas.push({
                field: el.prop,
                name: el.label,
                type: el.type,
                lov: el.$attrs["prop-enum"]
              });
            }
          }
        });
      });
    },
    // 收藏
    collect(val) {
      const isCollect=val.isCollect === 1 ? 0 : 1
      queryConditions(val.queryId, isCollect).then(res => {
        console.log(res);
        this.$message({
          message: res.msg === "" ? "操作成功" : res.msg,
          type: "success"
        });
        this.newData(toFormData(this.tableRequest));
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.choose-inner {
  width: 370px;
}
.star-style {
  color: #a6a6a6;
  font-size: 20px;
  cursor: pointer;
}
.star-style-sctive {
  color: #ff7c30;
}
</style>

